<!-- 公司名片 信息管理 -->
<template>
  <div class='company_management'>
    <div class="organList_left">
      <!-- 业务组织架构 -->
      <div class="organTit">
        <h3>组织架构</h3>
      </div>
      <Tree :data="treeListBusiness" @on-select-change="treeChangeBusiness"
        class="tree_render">
      </Tree>
    </div>
    <div class="organList_right">
      <dt-search ref="search" :labelWidth="100" :xl=8>
        <Button type="primary" style="margin-left: 8px" v-if="unlocking('0212010100')"
          @click="addCompany()">新建公司</Button>
      </dt-search>
      <dt-grid ref="table" page :onFetch='onFetch' :select="{sort:sortCase}" />
    </div>
    <add-company ref="addCompany" @success='onSuccess' />
  </div>
</template>

<script>
  import Column from './opt/columns'
  import companyApi from '@/biz/backStage/companyCard'
  import search from './opt/search'
  import addCompany from './components/addCompany'
  import toolApi from '@/biz/base/tool'

  export default {
    components: { addCompany },
    data() {
      return {
        searchInfo: {},
        curScoreSort: '',
        sord: '',
        orgDivisionId: null,
        orgCompanyId: null,
        orgOfficeId: null,
        treeListBusiness: [],
      };
    },
    methods: {
      //循环遍历部门
      forEachOA(mess, name) {
        mess.map((item) => {
          item.title = item[name]
          item.expand = item.level == 1 ? true : false
          item.children && this.forEachOA(item.children, name)
        })
      },
      //获取业务组织架构
      getBusinessList() {
        toolApi.organization()
          .then((res) => {
            this.forEachOA(res, 'orgName')
            this.treeListBusiness = res
          })
      },
      sortCase(sort) {
        this.sord = sort.order
        this.$refs.table.fetch()
      },
      onFetch(data) {
        let params = {
          sord: this.sord,
          sidx: this.sord ? 'informationCount' : '',
          orgDivisionId: this.orgDivisionId || null,
          orgCompanyId: this.orgCompanyId || null,
          orgOfficeId: this.orgOfficeId || null,
          ...data
        }
        return companyApi.companyPage(params)
      },
      checkFun(data) {
        console.log(data, '查看')
        this.$router.push({
          name: 'companyDetail',
          query: { companyId: data.id, isEdit: 'view' }
        })
      },
      editFun(data) {
        this.$router.push({
          name: 'companyDetail',
          query: { companyId: data.id, isEdit: 'edit' }
        })
      },
      onSuccess() {
        this.$refs.table.fetch()
      },
      //新建公司
      addCompany() {
        let data = {
          title: '新建公司',
          flag: 'add',
        }
        this.$refs.addCompany.show(data)
      },
      //更改状态
      changeStatus(data) {
        let params = {
          id: data.id,
          enableStatus: data.enableStatus == 1 ? 2 : 1
        }
        companyApi.updateEnableStatus(params).then(res => {
          this.onSuccess()
        })
      },
      treeChangeBusiness(data) {
        console.log(data, 'event')
        this.orgDivisionId = ''
        this.orgCompanyId = ''
        this.orgOfficeId = ''
        if (data.length > 0) {
          if (data[0].level == 1) {
            this.orgDivisionId = data[0].orgId
          } else if (data[0].level == 2) {
            this.orgCompanyId = data[0].orgId
          } else if (data[0].level == 3) {
            this.orgOfficeId = data[0].orgId
            console.log(this.orgOfficeId)
          }
        }

        this.onSuccess()
      },
    },
    mounted() {
      this.getBusinessList()
      this.$refs.table.init(this, new Column(this))
      this.$refs.search.init(this.$refs.table, new search(this).options(), this
        .searchInfo)
      this.$refs.table.fetch()
    },
  }
</script>
<style lang='scss' scoped>
  .company_management {
    padding: 15px;
    height: 100%;
    width: 100%;
    display: flex;

    .organList_left {
      flex: 0 0 300px;
      padding: 0 10px;
      height: 100%;
      border: 1px solid #ccc;
      margin-right: 20px;
      border-radius: 8px;
      max-height: 100%;
      overflow-y: auto;
      position: relative;

      .organTit {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 10px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }

      .tree_render {
        margin-top: 62px;
      }
    }

    .organList_right {
      // flex: 1;
      width: calc(100% - 320px);
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
    }

    ::v-deep .ivu-tree-title {
      width: calc(100% - 15px);
    }
  }
</style>